<template>
	<view class="videoBox">
		<view class="imgBox" v-if="!showVideo">
			<image :src="imgUrl"></image>
		</view>
		<video v-else :src="realVideoUrl" autoplay :controls="false" muted loop object-fit="cover"></video>
		<!-- <audio src="https://fomoclub.top/resource/radio/bjmusic.MP3"></audio> -->
		<view class="bgBox"></view>
		<view class="content" :style="{
      paddingTop: menuHeight + 'px'
		}">
			<slot name="content"></slot>
		</view>
	</view>
</template>

<script>
	import {
		getImgUrlLocal
	} from "@/utils";
	import {
		getDicts
	} from "@/api/api";

	export default {
		computed: {
			getImgUrlLocal() {
				return getImgUrlLocal
			},
			menuHeight() {
				return uni.getStorageSync('menuHeight')
			}
		},
		data() {
			return {
				videoUrl: this.$videoUrl,
				showVideo: true,
				realVideoUrl: '',
				imgUrl: 'http://wxa.mp.video.tencent-cloud.com/271/20304/stodownload?m=30429f94f88a9be6184dc27d68380686&filekey=30340201010420301e0202010f04025348041030429f94f88a9be6184dc27d6838068602025748040d00000004627466730000000132&hy=SH&storeid=267ce86580004a4bc000000000000010f00004f5053481593e031570fa5a27&bizid=1023'
			}
		},
		mounted() {
			this.getVideoFlag()
		},
		methods: {
			async getVideoFlag() {
				if (this.isBetweenThreeFiftyFiveAndFourTen()) {
					this.showVideo = false
				} else {
					// 判断按钮状态
					const res = await getDicts("mini_programs_background")
					if (res.data?.length > 0) {
						const flag = res.data[0]?.dictValue
						this.showVideo = flag === "true"
					}
				}

				if (this.showVideo) {
					this.realVideoUrl = this.videoUrl + '/mp4/1.mp4'
					console.log(this.realVideoUrl, "this.realVideoUrl");
				}
			},
			isBetweenThreeFiftyFiveAndFourTen() {
				// 获取当前时间
				const now = new Date();
				// 获取当前小时数
				const hours = now.getHours();
				// 获取当前分钟数
				const minutes = now.getMinutes();

				// 将当前时间转换为分钟数
				const currentMinutes = hours * 60 + minutes;
				// 3 点 55 分对应的分钟数
				const startMinutes = 3 * 60 + 55;
				// 4 点 10 分对应的分钟数
				const endMinutes = 4 * 60 + 10;

				// 判断当前时间是否在 3 点 55 分到 4 点 10 分之间
				return currentMinutes >= startMinutes && currentMinutes < endMinutes;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.videoBox {
		min-height: 100vh;
	}

	.content {
		position: absolute;
		z-index: 2;
		top: 0;
		left: 0;
		width: 100vw;
		min-height: 100vh;
	}

	.bgBox {
		width: 100vw;
		height: 100vh;
		position: fixed;
		z-index: 1;
		background: rgba(0, 0, 0, 0.6);
	}

	.imgBox,
	video {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 确保视频填充整个容器，可能会裁剪视频 */
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 0;

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>